<template>
  <div>
    <div>
      <div class="header">
        <el-input v-model="userId" placeholder="请输入用户ID"></el-input>
        <el-input v-model="orderSn" placeholder="请输入订单编号"></el-input>
        <el-button type="primary" @click="search">
          <svg-icon icon-class="search" />
          查找
        </el-button>
        <el-button type="primary" @click="excelData">
          <svg-icon icon-class="form" />
          导出
        </el-button>
      </div>

      <div class="table">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="orderSn" width="120" label="订单编号">
          </el-table-column>
          <el-table-column prop="userId" width="120" label="用户ID">
          </el-table-column>
          <el-table-column width="100" label="订单状态">
            <template slot-scope="scope">
              <div class="border" v-show="scope.row.orderStatus == 103">
                系统取消
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orderPrice" label="订单金额">
          </el-table-column>
          <el-table-column prop="orderPrice" width="100" label="支付金额">
          </el-table-column>
          <el-table-column width="100" label="支付时间"> </el-table-column>
          <el-table-column width="100" label="物流单号"> </el-table-column>
          <el-table-column width="100" label="物流渠道"> </el-table-column>
          <el-table-column width="200" label="操作">
            <template slot-scope="scope">
              <el-button @click="detail(scope.row)" type="primary" size="small">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :before-close="close" title="订单详情" :visible.sync="dialogTableVisible">
        <div class="order">
          <span>订单编号</span>
          <span class="a">{{ order.orderSn }}</span>
        </div>
        <div class="order">
          <span>订单用户</span>
          <span class="a">{{user.nickname}}</span>
        </div>
        <div class="order">
          <span>用户留言</span>
          <span class="a">{{ order.message }}</span>
        </div>
        <div class="order">
          <span>收货信息</span>
          <span class="a"
            >(收货人)&nbsp;{{ order.consignee }}&nbsp;(手机号)&nbsp;{{
              order.mobile
            }}&nbsp;(地址)&nbsp;{{ order.address }}</span
          >
        </div>
        <div class="order">
          <span>商品信息</span>
          <el-table border class="table" :data="orderGoods">
            <el-table-column
              property="goodsName"
              label="商品名称"
            ></el-table-column>
            <el-table-column
              property="goodsId"
              label="商品编号"
            ></el-table-column>
            <el-table-column label="商品规格">
              <template slot-scope="scope">
                <span v-for="item in scope.row.specifications" :key="item">{{
                  item
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              property="number"
              label="商品数量"
            ></el-table-column>
            <el-table-column label="货品图片">
              <template slot-scope="scope">
                <img :src="scope.row.picUrl" alt="" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="order">
          <span>收货信息</span>
          <span class="a"
            >(实际费用){{ order.actualPrice }}元&nbsp;=&nbsp;(商品总价){{
              order.orderPrice
            }}元&nbsp;+&nbsp;(快递费用){{
              order.freightPrice
            }}元&nbsp;-&nbsp;(优惠券减免){{
              order.couponPrice
            }}元&nbsp;-&nbsp;(积分减免){{order.integralPrice}}元
          </span>
        </div>
        <div class="order">
          <span>支付信息</span>
          <span class="a">
            (支付渠道)&nbsp;微信支付&nbsp;(支付时间)
          </span>
        </div>
        <div class="order">
          <span>快递信息</span>
          <span class="a">
            (快递公司)&nbsp;(快递单号)&nbsp;(发货时间)
          </span>
        </div>
        <div class="order">
          <span>收货信息</span>
          <span class="a">
            (确认收货时间)
          </span>
        </div>
      </el-dialog>

      <div style="padding: 40px 0" class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <div class="popup"></div>
    </div>
  </div>
</template>

<script>
import { getorder, getorderdetail } from "@/api/mall";
export default {
  props: [],
  data() {
    return {
      tableData: [],
      page: 1,
      total: 10,
      limit: 10,
      userId: "", //搜索用户id
      orderSn: "", //搜索订单编号
      dialogTableVisible: false,
      order: {},
      orderGoods: [],
      user: {},
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      let params = {
        page: this.page,
        limit: this.limit,
        userId: this.userId,
        orderSn: this.orderSn,
      };
      getorder(params).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.tableData = res.data.items;
          this.total = res.data.total;
        }
      });
    },

    // 改变每一页多少条数据
    handleSizeChange(e) {
      this.limit = e;
      this.getdata();
    },
    //改变当前页数
    handleCurrentChange(e) {
      this.page = e;
      this.getdata();
    },
    //搜索
    search() {
      this.getdata();
    },
    //点击详情
    detail(e) {
      this.dialogTableVisible = true;
      getorderdetail({ id: e.id }).then((res) => {
        console.log(res);
        if (res.errno == 0) {
          this.order = res.data.order;
          this.orderGoods = res.data.orderGoods;
          this.user = res.data.user;
        }
      });
    },
    //关闭弹出框
    close(){
        this.dialogTableVisible=false
        this.order={}
        this.orderGoods=[]
        this.user={}
    },
    //导出excel表格
    excelData() {
      const headers = {
        订单编号: "id",
        用户ID: "name",
        订单状态: "iconUrl",
        订单金额: "picUrl",
        支付金额: "keywords",
      };
      //懒加载
      import("@/vendor/Export2Excel").then((excel) => {
        const data = this.formatJson(headers, this.tableData);
        excel.export_json_to_excel({
          header: Object.keys(headers),
          data,
          filename: "订单管理",
        });
      });
    },
    // 该方法负责将数组转化成二维数组
    formatJson(headers, rows) {
      //首先遍历数组
      return rows.map((item) => {
        // item是对象  => 转化成只有值的数组 => 数组值的顺序依赖headers  {username: '张三'  }
        // Object.keys(headers)  => ["姓名", "手机号",...]
        return Object.keys(headers).map((key) => {
          return item[headers[key]]; // 得到 ['张三'，’129‘，’dd‘,'dd']
        });
      });
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.header {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  /deep/.el-input {
    width: 200px;
    margin-left: 15px;
    .el-input__inner {
      width: 200px;
    }
  }
  .el-button {
    margin-left: 15px;
  }
}
.table {
  padding: 15px;
  /deep/.cell {
    text-align: center;
    img {
      width: 40px;
      height: 40px;
    }
    .border {
      padding: 3px;
      background: #e3eefb;
      color: #409eff;
      border: 1px solid #409eff;
      border-radius: 5px;
    }
  }
}
.order {
  margin-top: 20px;
  .a {
    margin-left: 20px;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
